<template>
	<view class="policy-list-layout">
		<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
			<view class="policy-list">
				<view class="policy-list-item" v-for="item in dataList" :key="item.policyId" @tap="didSelectItem(item)">
					<image src="/static/operate/policy_icon.png" mode="aspectFit"></image>
					<view class="policy-list-item-enter">
						<text>{{item.policyId}}</text>
						<text>{{item.policyName}}</text>
					</view>
					<view class="policy-list-item-right">
						<text :style="{color:getStatus(item).color}">{{getStatus(item).status}}</text>
						<xh-icon icon="icon_jiantou"></xh-icon>
					</view>
					<view class="line policy-list-item-line"></view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getAgentPolicyList } from '@/common/api/api.js'
	const props = defineProps(['data'])
	const jsonData = JSON.parse(decodeURIComponent(props.data || '{}'))
	console.log(jsonData)
	const pagingRef = ref(null)
	const dataList = ref([])
	
	// 产品政策配置
	const didSelectItem = (item) => {
		if(item.openStatus == '1'){
			// 已配置
			uni.$emit('selectPolicy',item)
			uni.navigateBack()
		}
		else{
			//未配置
			const data = encodeURIComponent(JSON.stringify(item))
			uni.navigateTo({
				url: `/pages/home/agent-manager/agent-info/policy-list/policy-config/policy-config?data=${data}&agentId=${jsonData.agentId}`
			})
		}
		
	}
	// 处理状态
	const getStatus = (item)=>{
		if(item.openStatus == '1'){
			return {
				status:'已配置',
				color:'#02B555'
			}
		}
		else{
			return {
				status:'未配置',
				color:'#E12F16'
			}
		}
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		if(jsonData.agentId){
			params.agentId = jsonData.agentId
		}
		const res = await getAgentPolicyList(params, pageNo)
		const list = res.result
		if(pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value,...list]
		pagingRef.value.completeByTotal(list,res.page.totalElements)
	}
</script>

<style lang="scss" scoped>
.policy-list-layout{
	padding-bottom: 30rpx;
	.policy-list-header{
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text:nth-child(2){
			color: $xh-color-9;
		}
	}
	.policy-list{
		margin: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.policy-list-item{
			display: flex;
			align-items: center;
			padding: 30rpx;
			position: relative;
			.policy-list-item-line{
				left: 30rpx;
				right: 30rpx;
			}
			image{
				width: 52rpx;
				height: 52rpx;
				flex-shrink: 0;
			}
		}
		.policy-list-item-enter{
			display: flex;
			flex-direction: column;
			margin: 0 10rpx;
			text:nth-child(2){
				margin-top: 10rpx;
			}
		}
		.policy-list-item-right{
			display: flex;
			align-items: center;
			margin-left: auto;
			align-self: flex-start;
			color: $xh-red-color;
			font-size: 26rpx;
			flex-shrink: 0;
		}
	}
}
</style>
